<template>
  <!-- 登录页面 -->
  <div class="login-page">
      <!-- 头部 -->
        <mt-header>
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
            <router-link  slot="right" style="font-size:16px;" to="/auth/register">注册</router-link >
        </mt-header>
        <!-- logo -->
        <div class="img-box">
            <img src="~@/assets/login_logo.png"/>
        </div>
        <!-- 登录框 -->
        <div class="login-area">
            <!-- 两种登录方式 -->
            <p class="login-style">
                <span @click="active(2)" :class="{active:number==2}">普通密码登录</span>
                <span @click="active(1)" :class="{active:number==1}">动态密码登录</span>
            </p>
            <div class="auto-login" v-if="number==1">
              <div class="input-phone">
                  <svg class="icon icon-jia" aria-hidden="true" >
                      <use xlink:href="#icon-msnui-tel"></use>
                  </svg>
                  <input type="number" placeholder="请输入您的手机号" v-model="searchCondition.phone"/>
              </div>
              <!-- 输入验证码 -->
              <div class="input-yanzheng">
                  <svg class="icon icon-jia" aria-hidden="true" >
                      <use xlink:href="#icon-yanzhengma"></use>
                  </svg>
                  <input type="text" placeholder="请输入验证码" v-model="searchCondition.smscode"/>
                  <span class="fenge"></span>
                    <span v-show="phoneData.show" class="span-left" @click="getCode(phoneData)">获取验证码</span>
                    <span v-show="!phoneData.show" class="count">{{phoneData.count}} s</span>
              </div>
              <!-- 立即登录 -->
              <mt-button type="primary" size="large" @click="handleLogin">立即登录</mt-button>
              <!-- 下次自动登录、忘记密码 -->
              <!-- <div class="input-check">
                <label>
                    <input type="checkbox" />
                    <span>下次自动登录</span>
                </label>
                <span>忘记密码？</span>
              </div> -->
              <!-- 其他登录方式 -->
              <!-- <div class="login-extra">
                  <span></span>
                  <p >或</p>
                  <span></span>
              </div> -->
              <!-- 其他登录方式logo集合 -->
              <!-- <div class="logo-box">
                  <div>
                    <svg class="icon icon-jia" aria-hidden="true">
                      <use xlink:href="#icon-iconfonticon6"></use>
                  </svg> 
                  </div>
                  <div>
                     <svg class="icon icon-jia" aria-hidden="true" >
                      <use xlink:href="#icon-weixin"></use>
                    </svg> 
                  </div>
                  <div>
                      <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-weibo"></use>
                     </svg> 
                  </div>
              </div> -->
            </div> <!--动态登录结束  -->
            <div class="normal-login" v-if="number==2">
                 <!-- 输入你的手机号 -->
              <div class="input-phone">
                  <svg class="icon icon-jia" aria-hidden="true">
                      <use xlink:href="#icon-msnui-tel"></use>
                  </svg>
                  <input type="number" placeholder="请输入您的手机号" v-model="searchCondition.phone"/>
              </div>
             <!-- 输入验证码 -->
              <div class="input-yanzheng">
                  <svg class="icon icon-jia" aria-hidden="true" @click.prevent="fabu">
                      <use xlink:href="#icon-mima"></use>
                  </svg>
                  <input type="password" placeholder="请输入登录密码" v-model="searchCondition.pwd"/>
              </div>
            <!-- 立即登录 -->
              <mt-button type="primary" size="large" @click="handleLogin">立即登录</mt-button>
            <!-- 下次自动登录、忘记密码 -->
              <!-- <div class="input-check">
                  <div>
                      <input type="checkbox" />
                      <span>下次自动登录</span>
                  </div>
                  <span>忘记密码？</span>
              </div> -->
            <!-- 其他登录方式 -->
              <!-- <div class="login-extra">
                  <span></span>
                  <p>或</p>
                  <span></span>
              </div> -->
             <!-- 其他登录方式logo集合 -->
              <!-- <div class="logo-box">
                  <div>
                    <svg class="icon icon-jia" aria-hidden="true" >
                      <use xlink:href="#icon-iconfonticon6"></use>
                  </svg> 
                  </div>
                  <div>
                     <svg class="icon icon-jia" aria-hidden="true" >
                      <use xlink:href="#icon-weixin"></use>
                    </svg> 
                  </div>
                  <div>
                      <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-weibo"></use>
                     </svg> 
                  </div>
              </div> -->
            </div>
        </div>
  </div>
</template>

<script>
import { Header, Button, Radio, MessageBox } from "mint-ui";
import { Login } from "@/api/user/auth";
import cache from "@/utils/cache";
import { SendSmsCode, VerifySmsCode } from "@/api/filter";
export default {
  data() {
    return {
      number: 2,
      searchCondition: {
        phone: "",
        pwd: "",
        smscode: ""
      },
      phoneData: {
        phone:0,
        code: "",
        show: true,
        count: "",
        timer: null
      },
    };
  },
  methods: {
    active(item) {
      this.number = item;
      this.searchCondition.pwd="";
      this.searchCondition.smscode="";
    },
    handleLogin() {
      if (this.searchCondition.phone == "") {
        this.$toast("请填写正确的手机号");
        return;
      }
      if (this.number == 1 && this.searchCondition.smscode == "") {
        this.$toast("请输入短信验证码");
        return;
      }
      if (this.number == 2 && this.searchCondition.pwd == "") {
        this.$toast("请输入登录密码");
        return;
      }
      var $router=this.$router;
      Login(this.searchCondition).then(res => {
        if (res.StatusCode === 200) {
          // var data={
          //     id:res.Data.id,
          //     name:res.Data.name,
          //     type:res.Data.type,
          //     headportrait:res.Data.headportrait.indexOf('/Res')==-1?res.Data.headportrait:'www.zhugongzhe.com'+res.Data.headportrait
          // }
          //var data=JSON.parse(JSON.stringify(res.Data));
         // console.log(res.Data.id);
          var data =JSON.parse(JSON.stringify(res.Data))
         // this.$store.state.userinfo=res.Data;
        // console.log(res.Data.id+"xxxx"+ this.$store.state.userinfo);
            this.$store.state.userinfo.id=res.Data.id;
             this.$store.state.userinfo.name=res.Data.name;
             this.$store.state.userinfo.type=res.Data.type;
             this.$store.state.userinfo.headportrait=res.Data.headportrait.indexOf('/Res')==-1?res.Data.headportrait:'http://www.zhugongzhe.com'+res.Data.headportrait;
           cache.setLocal("zgz_user",  this.$store.state.userinfo);
          cache.setLocal('zgz_token',res.token);//设置缓存
          this.$store.state.token = res.token;
          this.$toast("登录成功！");
          setTimeout(function() {
           $router.push({ path: "/user" });
          }, 1000);
        } else {
          MessageBox.alert(res.Data);
        }
      });
    },
    //获取验证码
      getCode(phoneData) {
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(this.searchCondition.phone)) {
          this.$toast("请输入正确的手机号");
          return false;
        } else {
          SendSmsCode(this.searchCondition.phone).then(res => {
            if (res.StatusCode === 200) {
              this.$toast("发送成功");
              if (!this.phoneData.timer) {
                this.phoneData.count = 60;
                this.phoneData.show = false;
                this.phoneData.timer = setInterval(() => {
                  if (this.phoneData.count > 0 && this.phoneData.count <= 60) {
                    this.phoneData.count--;
                  } else {
                    this.phoneData.show = true;
                    clearInterval(this.phoneData.timer);
                    this.phoneData.timer = null;
                  }
                }, 1000);
              }
            }
          });
        }
    },
  }
};
</script>
<style lang="scss" scoped>
.login-page {
  background: #3887fe;
  height: 736px;
}
// logo
.img-box {
  width: 108.3px;
  height: 50px;
  margin: 30px auto;
  img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
}
// 登录区域
.login-area {
  margin-top: 24px;
  margin-left: 12px;
  margin-right: 12px;
  background: #ffffff;
  border-radius: 6px;
  padding: 26px 18px 29px 18px;
}
// 登录方式
.login-style {
  font-size: 16px;
  color: #999999;
  display: flex;
  text-align: center;
  span {
    display: block;
    width: 50%;
    padding-bottom: 17px;
    border-bottom: 1px solid #cfcfcf;
  }
  .active {
    color: #282828;
  }
}
// 输入手机号
.input-phone {
  border: 1px solid #cfcfcf;
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 24px;
  input {
    font-size: 14px;
    -webkit-input-placeholder {
      color: #cfcfcf;
    }
  }
  .icon {
    margin-right: 8px;
  }
}
//输入验证码
.input-yanzheng {
  border: 1px solid #cfcfcf;
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 24px;
  input {
    width: 65%;
    font-size: 14px;
    height: 20px;
  }
  .fenge {
    width: 1px;
    height: 14px;
    background: #cfcfcf;
    margin-right: 12px;
  }
  .icon {
    margin-right: 8px;
  }

  span {
    font-size: 14px;
    color: #666666;
  }
}
//立即登录
.mint-button {
  border-radius: 20px;
  background: #3887fe;
}
//下次立即登录
.input-check {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
  color: #999999;
  align-items: center;
  margin-bottom: 33px;
  input {
    height: 16px;
    width: 16px;
  }
}
// 其他登录方式
.login-extra {
  color: #999999;
  display: flex;
  align-items: center;
  margin-bottom: 28.3px;
  span {
    display: block;
    width: 43.2%;
    height: 1px;
    background: #999999;
  }
  p {
    margin: 0 16px;
  }
}
.logo-box {
  display: flex;
  justify-content: space-between;
  width: 95%;
  text-align: center;
  margin: 0 auto;
  div {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
      .icon{
        font-size: 18px;
        color:#ffffff;
      }
  }
}
</style>
